<!Doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Musje Demo</title>
  </head>
  <body>
    <h1 style="font-size: 26px">Musje Demo</h1>

    <script src="./dist/main.js"></script>

    <script>
      var musjeSrc =  (`
        title: 我們都是一家人
        subtitle: Naluwan
        composer: Taiwanese folk song

        /Allegro 4/4
        /mf 6. 6_ 6 6_6_ | 1' 6 (6_5_) 6 |
        3. 3_ 3 3_3_ | 5 3 (3_2_) 3 |
        /f 6 6_.6= 5_ 6 5_ | 5 3 (3_2_) 6, |
        2 3 5. 3_ | (2_1_) 6, 6, 0 ||

        6, 6,_6,_ 2 0 | 2 3_2_ 6, 0 |
        3_ 3 1'_ (6_5_) 3 | 1'_ 6 6_ (6_5_) (3_5_) | 3-. 0 |
        6 6 5_ 6 0_ | 2 2 3_ 3 0_ |
        6.5_ 3 2 | 3_2_ 1_7,_ 6, 0 |
        2 3 5.3_ | (2_1_) 6, 6,- |]

        lyrics:
        我的家鄉在那魯灣啊 你的家鄉在那魯灣啊
        從前的時候是一家人嗯 現在還是一家人

        手牽著手 肩並著肩 輕輕地唱出我們的歌兒聲
        團結起來 相親相愛 因為我們都是一家人
        現在還是一家人

        lyrics:
        My home-town is in Na-lu-wan ah.
        Your home-town is in Na-lu-wan ah.
        Once up-on a long ago, we are fami-ly.
        Now-a-days still we're fami-ly.

        Hand in the hand, shoulder to the shoulder,
        Gen-t-ly sing in our +2 song and voice.
        We are to-gether. With respects, with loves.
        Be-cause we are all in fa-mi-ly.
        Now we are still fa-mi-ly.
      `)

      var score = musje.parse(musjeSrc)
      score.addStyle(`
        score {
          width: 900px
        }
      `)
      document.body.appendChild(score.render())

      var playBtn = document.createElement('button')
      playBtn.textContent = '>'
      playBtn.addEventListener('click', function () { score.play() })
      document.body.appendChild(playBtn)

      var stopBtn = document.createElement('button')
      stopBtn.textContent = '[]'
      stopBtn.addEventListener('click', function () { score.stop() })
      document.body.appendChild(stopBtn)
    </script>
  </body>
</html>
